<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相对定位与绝对定位</title>
    <style type="text/css">
    body {
        width: 960px;
        margin: 0 auto;
        font-family: 微软雅黑;
        font-size: 18px;
        line-height: 1.8em;
    }

    div {
        width: 300px;
        float: left;
    }

    .relative {
        position: relative;
        top: 150px;
    }

    .absolute {
        position: absolute;
        top: 150px;
    }

    .bg {
        background-color: rgba(100, 100, 100, .5);
    }
    </style>
</head>

<body>
    <div>
        <h2>正常信息流</h2>
        <p>相遇真的是一种奇妙的东西，它在冥冥之中仿佛就注定了我会与你相遇。</p>
        <p>相遇，是你我初次见面。相遇，让你我了解彼此；相遇，让你我认识彼此；正因为相遇，你我的人生，才多了彼此。</p>
        <p class="bg">生命，原本就是一场又一场的相遇，每一次相遇，都值得我们铭记！</p>
        <p>愉悦的相遇，挥手后，在想象中具体、形象以至于如春风扑面。相遇或许只是片刻，可回忆中的愉悦会活泛每一个枯燥的日子，更会柔化日渐板结的心田。</p>
        <p>诗意的相遇，转身后，在回忆里酝酿、壮大以至于弥天漫地。相遇或许只是偶然，可回忆中的诗意却能够生动每一个趋于呆板的日子，给平淡烦闷的日子增添亮色。</p>
    </div>
    <div>
        <h2>相对定位</h2>
        <p>相遇真的是一种奇妙的东西，它在冥冥之中仿佛就注定了我会与你相遇。</p>
        <p>相遇，是你我初次见面。相遇，让你我了解彼此；相遇，让你我认识彼此；正因为相遇，你我的人生，才多了彼此。</p>
        <p class="bg relative">生命，原本就是一场又一场的相遇，每一次相遇，都值得我们铭记！</p>
        <p>愉悦的相遇，挥手后，在想象中具体、形象以至于如春风扑面。相遇或许只是片刻，可回忆中的愉悦会活泛每一个枯燥的日子，更会柔化日渐板结的心田。</p>
        <p>诗意的相遇，转身后，在回忆里酝酿、壮大以至于弥天漫地。相遇或许只是偶然，可回忆中的诗意却能够生动每一个趋于呆板的日子，给平淡烦闷的日子增添亮色。</p>
        <code>.relative { position: relative; top:150px;}</code>
    </div>
    <div>
        <h2>绝对定位</h2>
        <p>遇真的是一种奇妙的东西，它在冥冥之中仿佛就注定了我会与你相遇。</p>
        <p>相遇，是你我初次见面。相遇，让你我了解彼此；相遇，让你我认识彼此；正因为相遇，你我的人生，才多了彼此。</p>
        <p class="bg absolute">生命，原本就是一场又一场的相遇，每一次相遇，都值得我们铭记！</p>
        <p>愉悦的相遇，挥手后，在想象中具体、形象以至于如春风扑面。相遇或许只是片刻，可回忆中的愉悦会活泛每一个枯燥的日子，更会柔化日渐板结的心田。</p>
        <p>诗意的相遇，转身后，在回忆里酝酿、壮大以至于弥天漫地。相遇或许只是偶然，可回忆中的诗意却能够生动每一个趋于呆板的日子，给平淡烦闷的日子增添亮色。<</p>
        <code>.absolute {
        position: absolute;
        top:150px;}
      </code>
    </div>
</body>

</html>